<template >
    <div class="common-layout" style="background-color:honeydew">
        <el-container >
            <el-header class="header">
                <span class="icon">
                <el-icon :size="35">
                    <shop/>
                </el-icon>
            </span>
                <span class="title">汪汪羊</span>
            </el-header>
            <el-main class="main" >
                <el-col :span="100" v-for="order in orders" :key="order">
                    <el-card class="order-card" :oid="order.oid" style="margin-top: 10px">
                        <div class="left">
                            <el-image class="order-picture"
                                      :src="`http://127.0.0.1:8081/product/${order.product.picture}`"></el-image>
                            <div class="right">
                                <div>
                                    <el-text truncated style="font-size: 23px;">{{ order.product.title }}</el-text>
                                    <el-text type="info" truncated style="font-size: 20px;margin-left: 30px">
                                        {{ order.product.description }}
                                    </el-text>
                                </div>
                                <div>
                                    <el-text type="info" style="font-size: 15px">收货人：{{ order.username }}</el-text>
                                    <el-text type="info" style="margin-left: 20px">手机号：{{
                                        order.telephone
                                        }}
                                    </el-text>
                                </div>
                                <div>
                                    <el-text type="info" style="font-size: 15px">时间：{{ order.time }}</el-text>
                                </div>
                                <div>
                                    <el-text type="info">地址：{{ order.address }}</el-text>
                                </div>
                                <div>
                                    <el-text style="color: black;font-size: 18px">数量：x{{ order.number }}</el-text>
                                    <el-text style="margin-left: 30px;color: black;font-size: 18px">总价：{{
                                        order.total
                                        }}
                                    </el-text>
                                </div>
                                <div>
                                    <el-button style="margin-top: 10px; margin-left: 100px"
                                               @click="removeById(order.oid)">删除订单
                                    </el-button>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-main>
        </el-container>
    </div>
</template>

<script setup>
import {ArrowDown} from '@element-plus/icons-vue'
import router from '../../router/index.js'
import {onMounted, ref, reactive, toRaw} from 'vue'
import {ElMessage, ElMessageBox} from "element-plus";
import {useRoute} from "vue-router";
import orderApi from "../../api/order.js"
import axios from "axios";

onMounted(() => {
    queryByUid()
})
const route = useRoute()
let uid = route.query.uid
console.log(uid)
const orders = ref([])

const queryByUid = async () => {
    const res = await orderApi.queryByUid({uid: uid})
    console.log(uid)
    orders.value = res.data
}

const removeById = (oid) => {
    ElMessageBox.confirm(
        '确定删除该订单吗?',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        axios.delete('http://127.0.0.1:8080/order/removeById', {data: {oid: oid}}).then(res => {
            if (res.data) {
                ElMessage.success("删除成功")
                queryByUid();
            } else {
                ElMessage.error("删除失败")
            }
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '取消删除',
        })
    })
}
</script>

<style scoped>
.common-layout {
    width: 100%;
    margin: auto;
    height: 1000px;
}

.common-layout {
    cursor: pointer;
}

.header {
    height: 60px;
    background: rgba(33, 33, 33, .8);
    color: #f9f9f9;
    width: 100%;
}

.main {
    width: 80%;
    margin-left: 135px;
    padding-top: 10px;
}

.el-container {
    -ebkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.el-icon {
    color: orangered;
}

.icon {
    display: inline-block;
    vertical-align: middle; /*垂直方向居中对齐*/
}

.title {
    margin-left: 10px;
    font-size: 25px;
    font-weight: bolder;
    line-height: 60px; /* 行高 行高等于父级容器的高度 将在父级容器中垂直居中 */
}

.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
    text-align: center;
}

.el-dropdown-link {
    float: right;
    padding-top: 22px;
    padding-right: 20px;
    color: white;
}

.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}

.title {
    padding: 8px 10px;
    font-weight: bold;
}

hr {
    width: 160px;
    height: 1px;
    margin: 8px auto;
    color: #ffffee;
    border: 0;
    border-top: 1px #ddd solid;
}

.left {
    float: left;
    height: 170px;
    margin-left: 20px;
}

.right {
    float: right;
    width: 700px;
    margin-left: 100px;
}

.order-picture {
    height: 150px;
    width: 150px;
}
</style>